<template>
  <view class="search-page">
    <view class="search">
      <u-search
        :showAction="false"
        :animation="false"
        @search="search"
        v-model="searchProfessor"
      ></u-search>
    </view>
    <view class="result">
      <text style="font-size: 13px; color: #868687">共{{ total }}人</text>
      <ProfessorCard
        :professor="professor"
        v-for="(professor, index) in professorNameList"
        :key="index"
      />
      <u-loadmore
        :status="status"
        loadmoreText="点击此处文字，加载更多"
        @loadmore="loadmore"
        line
      />
    </view>
  </view>
</template>

<script>
  import { professor } from "@/api";
  import { ERROR_TYPE } from "@/common/constants";
  import { showMessage } from "@/common/utils";

  export default {
    data() {
      return {
        /**
         * 存储搜索结果的专家名单
         * @type {Array<Object>}
         */
        professorNameList: [],
        /**
         * 当前页数
         * @type {number}
         */
        pageNum: 1,
        /**
         * 每页大小
         * @type {number}
         */
        pageSize: 15,
        /**
         * 总数
         * @type {number}
         */
        total: 0,
        /**
         * 当前页数
         * @type {number}
         */
        currentPage: 1,
        /**
         * 总页数
         * @type {number}
         */
        totalPages: 0,
        /**
         * 状态
         * @type {string}
         */
        status: "loadmore",
        /**
         * 搜索关键词
         * @type {string}
         */
        searchProfessor: "",
      };
    },
    onLoad() {
      this.searchProfessor = this.$route.query.searchProfessor;
      this.search(this.searchProfessor);
    },
    onReachBottom() {
      this.loadmore();
    },
    methods: {
      /**
       * 搜索专家
       * @param {string} e - 搜索关键词
       * @returns {void}
       */
      async search() {
        this.status = "loading";
        try {
          const response = await professor.getProfessorNameList({
            name: this.searchProfessor,
            pageNum: this.pageNum,
            pageSize: this.pageSize,
          });

          this.currentPage = response.data.current;
          this.totalPages = response.data.pages;
          this.total = response.data.total;

          if (this.pageNum > 1) {
            this.professorNameList = [
              ...this.professorNameList,
              ...response.data.records,
            ];
          } else {
            this.professorNameList = response.data.records;
          }

          this.status =
            this.currentPage >= this.totalPages ? "nomore" : "loadmore";
        } catch (error) {
          if (error.type === ERROR_TYPE.NETWORK) {
            return;
          }
          showMessage(error.msg || "搜索失败，请稍后重试", false);
        }
      },
      /**
       * 加载更多数据
       * @returns {void}
       */
      async loadmore() {
        if (this.status === "loadmore") {
          this.pageNum++;
          this.status = "loading";
          await this.search();
        }
      },
    },
  };
</script>

<style lang="scss" scoped>
  .search-page {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: var(--margin-mini) var(--margin-base);
  }

  .result {
    width: 95%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--margin-small);
    margin-top: var(--margin-mini);
  }
</style>
